<template>
	<view>
		<uni-notice-bar show-icon text="点击工具查看详情" />

		<view class="bg">
			<view @click="handleCalendar">
				<view class="content">
					<view style="text-align: center;">
						<view>
							<text class="week">{{week}}</text>
							<text class="month">{{month}}</text>
						</view>
						<view style="display: flex;">
							<view class="day">{{day}}</view>
							<view class="lunarDay">{{lunarDay}}</view>
						</view>
					</view>
				</view>
				<view class="title">日历</view>
			</view>

			<view @click="handleWeather">
				<view class="content">
					<view class="city">
						<view>{{city}}</view>
						<uni-icons type="paperplane-filled" size="16" color="#333"></uni-icons>
					</view>
					<view style="text-align: center;">
						<view class="temperature">{{temperature}}°</view>
						<view style="display: flex;justify-content: center;">
							<image class="weather-image" :src="getWeatherImage(weather)"></image>
							<view class="weather">{{weather}}</view>
						</view>
					</view>
				</view>
				<view class="title">天气</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import {
		Solar,
		Lunar
	} from "lunar-javascript"

	const week = ref('')
	const month = ref('')
	const day = ref('')
	const lunarDay = ref('')
	const longitude = ref(0)
	const latitude = ref(0)
	const city = ref('济南市') //地区
	const weather = ref('多云') //天气描述
	const temperature = ref(0) //温度
	onLoad(() => {
		let d = Solar.fromDate(new Date())
		week.value = '周' + d.getWeekInChinese()
		month.value = d.getMonth() + '月'
		day.value = d.getDay()

		let l = Lunar.fromDate(new Date());
		lunarDay.value = l.getMonthInChinese() + '月' + l.getDayInChinese()

		// 获取当前位置
		uni.getLocation({
			type: 'gcj02',
			// type: 'wgs84',
			success: function(res) {
				// console.log('当前位置的经度：' + res.longitude);
				// console.log('当前位置的纬度：' + res.latitude);
				longitude.value = res.longitude
				latitude.value = res.latitude
				getWheather()
			}
		});
	})
	
	onShareAppMessage((res)=>{
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '这款小程序太好用啦',
			path: '/pages/index/index'
		}
	})

	// 获取天气信息
	function getWheather() {
		uni.request({
			url: 'https://apis.map.qq.com/ws/weather/v1/', //仅为示例，并非真实接口地址。
			data: {
				key: '5BQBZ-IB3HB-PQKUU-NUN5H-EUFZ7-2IFLC',
				location: `${latitude.value},${longitude.value}`,
			},
			header: {
				'content-type': 'application/x-www-form-urlencoded'
			},
			success: (res) => {
				console.log(res.data);
				if (res.data.status == 0) {
					let realtime0 = res.data.result.realtime[0]
					city.value = realtime0.district

					weather.value = realtime0.infos.weather
					temperature.value = realtime0.infos.temperature
				} else {
					uni.showToast({
						title: res.data.message,
						icon: "none"
					});
				}
			},
			fail: (err) => {
				uni.showToast({
					title: "接口调用失败",
					icon: "none"
				});
			}
		});
	}

	function getWeatherImage(text) {
		// 检查文本中是否包含各种天气关键词
		const hasRain = text.includes('雨');
		const hasSnow = text.includes('雪');
		const hasSunny = text.includes('晴');
		const hasCloudy = text.includes('多云');

		// 优先检查雨雪组合
		if (hasRain && hasSnow) {
			return '/static/weather-yuXue.png';
		} else if (hasRain) {
			return '/static/weather-yu.png';
		} else if (hasSnow) {
			return '/static/weather-xue.png';
		} else if (hasSunny) {
			// 检查晴天
			return '/static/weather-qing.png';
		} else if (hasCloudy) {
			// 检查多云
			return '/static/weather-duoyun.png';
		} else {
			// 既不包含以上天气，返回默认图片
			return '/static/weather-duoyun.png';
		}
	}

	function handleCalendar() {
		uni.navigateTo({
			url: "/pages/index/calendar/calendar"
		})
	}

	function handleWeather() {
		uni.navigateTo({
			url: "/pages/index/weather/weather"
		})
	}
</script>

<style>
	@import "index.css"
</style>